import { animate } from "../utils/anim_util.js";

export default class SuperSwiper {
    constructor(root, conf) {
        /* 找出元素 */
        this.findElements(root, conf.selectors);

        /* 初识化全局参数 */
        this.initParams(conf);

        /* 初始化无缝滚动 */
        this.initSeamless();

        /* 初始化指示器 */
        this.initPointers();

        /* 初始化布局 */
        this.initLayout();

        /* 自动轮播 */
        this.startAutoPlay();

        /* 事件监听 */
        this.initListeners();
    }

    setElementStyles(elem, styles) {
        for (let attr in styles) {
            elem.style[attr] = styles[attr];
        }
    }

    /* 初始化布局 */
    initLayout() {
        this.setElementStyles(this.root, {
            position: "relative",
            height: "100%",
            // zIndex: 1000,
        });

        console.log("rootWidth", this.rootWidth);
        this.setElementStyles(this.ul, {
            position: "absolute",
            display: "flex",
            left: `-${this.rootWidth}px`,
            width: this.rootWidth * (this.sliders.length + 2) + "px",
            transform: "none !important",
            transition: "none",
        });

        Array.from(this.ul.children).forEach((slider) => {
            this.setElementStyles(slider, {
                float: "none",
                position: "static",
                transition: "none",
                width: this.rootWidth,
                left: "0px",
                opacity: 1,
                // zIndex: 9999,
            });
        });
    }

    /* 初始化全局参数 */
    initParams(conf) {
        const { animSpeed,pointerActiveClass } = conf;

        /* 定义常量 */
        this.AINIM_TIMECOST = animSpeed || 500;

        // 指示器激活类名
        this.pointerActiveClass = pointerActiveClass;

        // 当前幻灯片序号
        this.currentIndex = 0;
        // 窗口宽度
        this.rootWidth = this.root.clientWidth;
        // console.log(bannerWidth);
        // 定时器
        this.timer = null;

        // 记录动画是否正在运行
        this.animIsRunning = false;
    }

    /* 初始化无缝滚动 */
    initSeamless() {
        const tail = this.sliders[0].cloneNode(true);
        const head = this.sliders[this.sliders.length - 1].cloneNode(true);
        this.ul.appendChild(tail);
        this.ul.insertBefore(head, this.sliders[0]);
    }

    /* 找出所有元素 */
    findElements(root, selectors) {
        const {
            sliders,
            sliderWrapper,
            pointerWrapper,
            pointers,
            btnPrev,
            btnNext,
        } = selectors;

        this.root = document.querySelector(root);
        this.ul = this.root.querySelector(sliderWrapper);
        this.btnPrev = document.querySelector(btnPrev);
        this.btnNext = document.querySelector(btnNext);

        // 找出所有幻灯片
        this.sliders = this.root.querySelectorAll(sliders);

        // 找出指示器容器和所有指示器
        this.pointerBox = document.querySelector(pointerWrapper);
        this.pointers = pointers;
    }

    /* 移动到目标位置 */
    move() {
        // 标记动画开始
        this.animIsRunning = true;

        animate(
            this.ul,
            {
                left: -this.rootWidth * (this.currentIndex + 1) + "px",
            },
            this.AINIM_TIMECOST,
            () => {
                // 移形换影【5=0】【-1=4】
                if (this.currentIndex === this.sliders.length) {
                    this.currentIndex = 0;
                    this.ul.style.left =
                        -this.rootWidth * (this.currentIndex + 1) + "px";
                }
                if (this.currentIndex === -1) {
                    this.currentIndex = 4;
                    this.ul.style.left =
                        -this.rootWidth * (this.currentIndex + 1) + "px";
                }

                // 同步指示器
                this.pointers.forEach((p, index) => {
                    if (index === this.currentIndex) {
                        p.classList.add(this.pointerActiveClass);
                    } else {
                        p.classList.remove(this.pointerActiveClass);
                    }
                });

                // 标记动画已停止
                this.animIsRunning = false;
            }
        );
    }

    /* 上一张 */
    prev() {
        // 如果动画正在运行则什么都不做
        if (this.animIsRunning) {
            return;
        }

        // if (currentIndex <= 0) {
        //     currentIndex = lis.length
        // }

        this.currentIndex--;

        // ul向左偏移this.rootWidthpx
        this.move();
    }

    /* 下一张 */
    next() {
        // 如果动画正在运行则什么都不做
        if (this.animIsRunning) {
            return;
        }

        // if (currentIndex >= lis.length - 1) {
        //     currentIndex = -1
        // }

        this.currentIndex++;

        // ul向左偏移this.rootWidthpx
        console.log("this", this);
        this.move();
    }

    /* 初始化指示器 */
    initPointers() {
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < this.sliders.length; i++) {
            const li = document.createElement("li");
            fragment.appendChild(li);
        }
        this.pointerBox.appendChild(fragment);
        this.pointers = document.querySelectorAll(this.pointers);

        // 将指示器中的第0个设置为高亮
        this.pointers[0].classList.add("active");
    }

    /* 开始轮播 */
    startAutoPlay() {
        if (!this.timer) {
            this.timer = window.setInterval(this.next.bind(this), 1000);
        }
    }

    /* 停止轮播 */
    stopAutoPlay() {
        if (this.timer) {
            window.clearInterval(this.timer);
            this.timer = null;
        }
    }

    initListeners() {
        /* 不允许鼠标选中文字 */
        document.onselectstart = (e) => {
            e.preventDefault();
        };

        this.btnPrev.onclick = () => {
            this.prev();
        };

        this.btnNext.onclick = () => {
            this.next();
        };

        /* 鼠标进入banner 停止轮播 */
        this.root.onmouseenter = (e) => {
            this.stopAutoPlay();
        };

        /* 鼠标离开banner 开始轮播 */
        this.root.onmouseleave = (e) => {
            this.startAutoPlay();
        };
    }
}
